<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery.js"></script>
    <style>
        #d{
            width:200px;
            height:100px;
            background-color: pink;
            border:1px solid blue;
            overflow:auto;
        }
    </style>

    <script>
        function queryOne() {
            var key=$("#one").val();
            var d=$("#d");
            if(""==key){
                //d.hide();
                d.css("display","none");
                return;
            }
            d.html("");
            //方法四：发送ajax请求
            $.getJSON(
                "/findOne",
                {"key":key},//传向后端的参数
                function (data) {
                    if(data.msg==null){//如果没查询到内容，则隐藏div
                        d.hide();
                        return;
                    }
                    d.show();//如果查到内容则把内容放到div中
                    d.html("<li>"+data.msg+"</li>");
                }
            );
        }
        function queryMore() {
            var key=$("#more").val();
            var d=$("#d");
            if(""==key){
                d.hide();
                return;
            }
            d.html("");
            $.ajax({
                url:"/findMore",
                data:{"key":key},
                dataType:"json",
                success:function (data) {
                    if(data.length==0){
                       d.hide();
                       return;
                    }
                    d.show();
                    for(var i=0;i<data.length;i++){
                        var c=d.html();
                        d.html(c+"<li>"+data[i].msg+"</li>");
                    }
                }
            });
        }
    </script>
</head>
<body>
    精确查询：<input id="one" style="width:210px;" onkeyup="queryOne();"><br>
    模糊查询：<input id="more" style="width:210px;" onkeyup="queryMore();"><br>
    <div id="d">
        <!--<li>aaa</li>-->
    </div>
</body>
</html>